<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Display a map</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <link
      href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css"
      rel="stylesheet"
    />    
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.js'></script>
  <link href="../mapbox-gl.css" rel="stylesheet" />
  <link rel="stylesheet" href="../mapbox-gl-draw.css" />
  <script src="../mapbox-gl.js"></script>
  <script src="./mapbox-gl.js"></script>
  <script src="../mapbox-gl-draw.js"></script>
  <script src="./drawMagicWand.js"></script>

  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      cursor: pointer;
    }

    #magic_wand_btn {
      position: relative;
      top: 20px;
      left: 20px;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <button id="magic_wand_btn" onClick="drawMagic()">魔术棒</button>

  <script>
    var mapObject = new mapboxgl.Map({
      container: 'map',
      style: {
        version: 8,
        name: 'Mapbox Streets',
        // sprite: 'http://192.168.1.188:20008/sprites/sys/osm-liberty',
        // glyphs: 'http://192.168.1.188:20002/font/sys/{fontstack}/{range}.pbf',
        sources: {},
        layers: [],
        style: "../../../static/map/map.json",
      },
      center: [116.46, 39.92],
      zoom: 4,
      preserveDrawingBuffer: true,
    });
    mapObject.addControl(new mapboxgl.NavigationControl());

    mapObject.on('load', function () {
      let tile = 
        'http://60.247.54.35:8888/usmaps?tilematrix={z}&layer=l&style=1&tilerow={y}&tilecol={x}&tilematrixset=w&format=image%2Fwebp&service=WMTS&version=1.0.0&request=GetTile&tags=ZY3%7CGF1%7CGF6&t0=1577808000&t1=1609430399'
      mapObject.addSource('test', {
        type: 'raster',
        tiles: [tile
          //'http://192.168.1.81:8083/v1?request=GetTile&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&info={"info":[{"path":"/export/data-share/image/satellite/tuban.tif"}]}',
        ],
        tileSize: 256,
      });
      mapObject.addLayer({
        id: 'test-data',
        type: 'raster',
        source: 'test',
      });
    });
    mapObject.fitBounds(
      [
        [104.62843619226514, 30.075407827946282],
        [104.62301519410619, 30.07174618503473],
      ], {
        padding: {
          top: 10,
          bottom: 25,
          left: 15,
          right: 5
        },
      }
    );
    var draw = new MapboxDraw();
    mapObject.addControl(draw);

    //魔术棒
    function drawMagic() {
      

      console.log('mapObject', mapObject);
      drawMagicWand(mapObject, draw);
    }
    mapObject.on('draw.create', function (e) {
    
      console.log('e', e);
    });
    mapObject.on('draw.update', function (e) {
      console.log('e', e);
    });
    mapObject.on('draw.delete', function (e) {
      console.log('e', e);
    });
  </script>
</body>

</html>